HTML, body {
    height: 100%;
    font-size: 16px;
    line-height: 1.5;
    font-family: Trebuchet MS, Helvetica, Arial, sans-serif;
  }
  
  body {
    overflow: hidden;
    background-color: #fff;
    background-image: url(../img/ys1.jpg);
    background-size: cover;
    
   /*  background-size: .75em 100%, 100% 100%; */
    background-attachment: fixed;
    display: flex;
    align-items: center;
  }
  
  .wrapper {
    position: relative;
    flex-grow: 1;
    margin: auto;
    max-width: 1200px;
    max-height: 1200px;
    
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    grid-template-rows: repeat(4, 1fr);
    grid-gap: 2vmin;
    justify-items: center;
    align-items: center;
  }
  
  img {
    z-index: 1;
    grid-column: span 2;
    max-width: 100%;
    margin-bottom: -52%;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
    transform: scale(1);
    transition: all .25s;}
    
img :nth-child(7n + 1) {
      grid-column: 2 / span 2;
    }
    
img:hover {
      z-index: 2;
      transform: scale(2);
    }
  
  